<template>
  <div>
    <div class="topFilter">
      <el-row :gutter="15">
        <el-form
          ref="elForm"
          :model="formData"
          size="medium"
          label-width="100px"
        >
          <el-col :span="8">
            <el-form-item label="姓名" prop="hzName">
              <el-input
                v-model="formData.hzName"
                placeholder="请输入姓名"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="诊断号" prop="hzNum">
              <el-input
                v-model="formData.hzNum"
                placeholder="请输入诊断号"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证号" prop="hzCard">
              <el-input
                v-model="formData.hzCard"
                placeholder="请输入身份证号"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <div class="submit">
            <el-form-item size="large">
              <el-button type="primary" @click="submitForm">提交</el-button>
              <el-button @click="resetQuery">重置</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-row>
    </div>
    <div class="stateTabs">
      <Tabs type="card" v-model="formData.hzState" @click.native="getList">
        <TabPane label="就诊中" name="0"></TabPane>
        <TabPane label="已退费" name="3"></TabPane>
      </Tabs>
      <Table border :columns="columns0" :data="datalist"> </Table>
      <pagination
        class="pagTitle"
        v-show="total > 0"
        :total="total"
        :page.sync="formData.pageNum"
        :limit.sync="formData.pageSize"
        @pagination="getList"
      />
    </div>
    <Modal
      v-model="modalFollow"
      title="退费"
      @on-ok="bounceOk"
      @on-cancel="bounceCancel"
    >
      <div>
        <el-descriptions
          title="患者信息"
          direction="horizontal"
          :column="2"
          size="medium"
          border
          :labelStyle="{ width: '180px' }"
        >
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              患者姓名 </template
            >{{ !tableList ? "" : tableList.hzName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-news"></i>
              年龄 </template
            >{{ !tableList ? "" : tableList.hzAge }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-female"></i>
              性别 </template
            >{{
              !tableList ? "" : tableList.hzSix == "1" ? "男" : "女"
            }}</el-descriptions-item
          >
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-connection"></i>
              诊断号 </template
            >{{ !tableList ? "" : tableList.hzNum }}</el-descriptions-item
          >
          <el-descriptions-item :span="2">
            <template slot="label">
              <i class="el-icon-bank-card"></i>
              身份证号 </template
            >{{ !tableList ? "" : tableList.hzCard }}</el-descriptions-item
          >
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              联系方式 </template
            >{{ !tableList ? "" : tableList.hzCall }}</el-descriptions-item
          >
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location"></i>
              住址 </template
            >{{ !tableList ? "" : tableList.hzAddress }}</el-descriptions-item
          >
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-first-aid-kit"></i>
              科室 </template
            >{{ !tableList ? "" : tableList.hzDpet }}</el-descriptions-item
          >
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-bangzhu"></i>
              挂号类型 </template
            >{{
              !tableList ? "" : tableList.hzLevel == "1" ? "专家" : "普通"
            }}</el-descriptions-item
          >
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-trophy"></i>
              看诊医生 </template
            >{{ !tableList ? "" : tableList.hzDoc }}</el-descriptions-item
          >
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              病历本 </template
            >{{ !tableList ? "" : tableList.hzBook }}</el-descriptions-item
          >
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-watch"></i>
              挂号时间 </template
            >{{ !tableList ? "" : tableList.hzTime }}</el-descriptions-item
          >
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-watch"></i>
              就诊状态 </template
            >{{
              !tableList
                ? ""
                : tableList.hzState == "3"
                ? "已退费"
                : datalist.hzState == "1"
                ? "已就诊"
                : "就诊中"
            }}</el-descriptions-item
          >
        </el-descriptions>
      </div>
      <div class="bottonTf">
        <h1>退费金额：{{ money }} 元</h1>
      </div>
    </Modal>
  </div>
</template>
<script>
import { listUser, updateUser } from "@/api/qiantai/user";
export default {
  components: {},
  props: [],
  data() {
    return {
      tableList: null,
      modalFollow: false,
      total: 0,
      money: 0,
      datalist: [],
      formData: {
        pageNum: 1,
        pageSize: 10,
        hzName: null,
        hzNum: null,
        hzCard: null,
        hzState: "3",
      },
      columns0: [
        {
          title: "患者姓名",
          key: "hzName",
        },
        {
          title: "病历号",
          key: "hzNum",
        },
        {
          title: "登记时间",
          key: "hzTime",
        },
        {
          title: "科室",
          key: "hzDpet",
        },
        {
          title: "挂号类型",
          key: "hzLevel",
          render: (h, params) => {
            return h("span", params.row.hzLevel == "1" ? "专家" : "普通");
          },
        },
        {
          title: "看诊医生",
          key: "hzDoc",
        },
        {
          title: "状态",
          key: "hzState",
          render: (h, params) => {
            return h(
              "span",
              params.row.hzState == "1"
                ? "就诊完"
                : params.row.hzState == "2"
                ? "复诊中"
                : params.row.hzState == "3"
                ? "已退费"
                : "就诊中"
            );
          },
        },
        {
          title: "操作",
          key: "action",
          width: "100",
          align: "center",
          render: (h, params) => {
            if (params.row.hzState == "0") {
              return h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small",
                  },
                  on: {
                    click: () => {
                      this.followUp(params.row);
                    },
                  },
                },
                "退费"
              );
            } else {
              return h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small",
                    disabled: true,
                  },
                },
                "退费"
              );
            }
          },
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    bounceCancel() {},
    bounceOk() {
      this.$confirm("是否确定退费?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        updateUser({ hzId: this.tableList.hzId, hzState: "3" }).then((res) => {
          if (res.code == 200) {
            this.getList();
            this.$message({
              type: "success",
              message: "退费成功!",
            });
          }
        });
      });
    },
    followUp(res) {
      this.tableList = res;
      this.modalFollow = true;
      if (res.hzLevel == "1") {
        this.money = 30 + res.hzBook * 5;
      } else {
        this.money = 20 + res.hzBook * 5;
      }
      console.log(this.tableList);
    },
    getList() {
      listUser(this.formData).then((res) => {
        this.datalist = res.rows;
        this.total = res.total;
      });
    },
    submitForm() {
      this.getList();
    },
    resetQuery(){
      this.resetForm("elForm");
      this.getList();
    }
  },
};
</script>

<style lang="scss" scoped>
.topFilter {
  margin-top: 60px;
  padding-right: 60px;
}
.submit {
  position: relative;
  left: 1030px;
}
.bottonTf {
  margin-top: 10px;
  padding-left: 550px;
}
.stateTabs {
  padding: 0 80px 0;
}
.pagTitle {
  margin-bottom: 50px;
}
::v-deep {
  .ivu-modal-content {
    width: 800px;
  }
  .pagination-container .el-pagination {
    width: 100%;
    text-align: center;
  }
}
</style>
